<template>
  <div class="frame-qxo-1" :style="{ background: frameBgColor }">
    <div class="vec-rectangle-jGe-2" :style="{ background: textBgColor }"></div>
    <!-- 动态绑定 text-UML-3 的背景色 -->
    <div class="text-UML-3">
      <div class="p-text-UML-3">
        <svg-icon
          icon-class="stopdl"
          v-if="props.status && props.status != '断电' && props.status != ''"
          width="20"
          height="20"
          @click="sendData"
        >
          <!-- 设置圆心坐标和半径，填充颜色为黑色 -->
          <!-- <circle cx="10" cy="10" r="10" fill="black" /> -->
        </svg-icon>

        <!-- <span class="span-ygO-1">{{ chartText }}</span> -->
      </div>
    </div>
    <div class="text-eTE-4">
      <div class="p-text-eTE-4">
        <span class="span-WJM-1">{{ indexText }}</span>
      </div>
    </div>
    <div class="frame-dOW-5">
      <div class="vec-rectangle-fbf-1"></div>
      <div class="frame-JaL-2">
        <div class="frame-gts-1">
          <div class="text-cKl-1">
            <div class="p-text-cKl-1">
              <span class="span-wTp-1">{{ currentLabel }}</span>
            </div>
          </div>
          <div class="text-dId-2">
            <div class="p-text-dId-2">
              <span class="span-YrM-1"
                >{{ Number(currentValue).toFixed(2) }}mA</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from "vue";
import { sendControl } from "@/api/device/mqttSend";
// 添加 Element Plus 消息和确认框组件导入
import { ElMessageBox, ElMessage } from "element-plus";
// 计算属性，根据状态值返回 text-UML-3 的背景色
const textBgColor = computed(() => {
  switch (props.status) {
    case "正常":
      return "rgba(59, 179, 70, 1)";
    case "烧毁":
      return "rgba(249, 57, 32, 1)";
    case "退化":
      return "rgba(252, 136, 0, 1)";
    case "断电":
      return "rgba(110, 116, 122, 1)";
    default:
      return "rgba(59, 179, 70, 1)";
  }
});

// 计算属性，根据状态值返回 frame-qxo-1 的背景色
const frameBgColor = computed(() => {
  switch (props.status) {
    case "正常":
      return "rgba(240, 249, 241, 1)";
    case "烧毁":
      return "rgba(255, 240, 238, 1)";
    case "退化":
      return "rgba(255, 246, 235, 1)";
    case "断电":
      return "rgba(244, 244, 245, 1)";
    default:
      return "rgba(240, 249, 241, 1)";
  }
});
const props = defineProps({
  // 图表文本
  chartText: {
    type: String,
    default: "图表",
  },
  // Index 文本
  indexText: {
    type: String,
    default: "器件 1",
  },
  // 新增板卡ID属性
  boardid: {
    type: String,
    default: "",
  },
  // 新增组件ID属性
  componentid: {
    type: String,
    default: "",
  },

  // Current 标签文本
  currentLabel: {
    type: String,
    default: "Current",
  },
  // Current 数值
  currentValue: {
    type: String,
    default: "0.1",
  },
  // 新增状态属性
  status: {
    type: String,
    default: "正常",
  },
  enableboardstatus: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "pd",
  },
  deviceid: {
    type: String,
    default: "",
  },
  datasourceindex: {
    type: String,
    default: "",
  },
  testInfo: {
    type: Object,
    default: () => {},
  },
});
const sendData = () => {
  ElMessageBox.confirm("关闭电流？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // 准备发送的数据，包含系统配置和板卡配置
    const dataToSend = {
      datasourceindex: props.datasourceindex,
      type: props.type,
      deviceid: props.deviceid,
      message: {
        type: "器件操作",
        config: {
          componentid: `${props.boardid}-${props.componentid}`,
          control: "断电",
        },
      },
    };
    // 调用发送 API
    sendControl(dataToSend).then((res) => {
      ElMessage.success("操作下发");
      // 可添加成功提示
    });
  });
};
</script>
<style scoped>
.frame-qxo-1 {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 146px;
  border-radius: 2px;
  mix-blend-mode: normal;
  display: flex;
  opacity: 1;
  background: rgba(240, 249, 241, 1);
  box-sizing: border-box;
  order: 0;
  flex-shrink: 0;
}
.vec-rectangle-jGe-2 {
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: auto;
  height: 40px;
  border-radius: 2px 2px 0px 0px;
  mix-blend-mode: normal;
  background: rgba(59, 179, 70, 1);
  right: 0px;
}
.text-UML-3 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 2;
  justify-content: start;
  left: calc(50% - 32px / 2 - 1.5px);
  height: 16px;
  mix-blend-mode: normal;
  color: rgba(42, 121, 250, 1);
  font-size: 16px;
  line-height: 16px;
  font-weight: 400;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Regular";
  letter-spacing: 0px;
  white-space: nowrap;
  bottom: 12px;
}
.text-eTE-4 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 3;
  justify-content: start;
  left: calc(50% - 57px / 2 - 2px);
  top: 12px;
  height: 16px;
  mix-blend-mode: normal;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: nowrap;
}
.frame-dOW-5 {
  position: absolute;
  z-index: 5;
  left: 12px;
  top: 46px;
  width: auto;
  height: auto;
  mix-blend-mode: normal;
  right: 17px;
  bottom: 37px;
}
.vec-rectangle-fbf-1 {
  position: absolute;
  z-index: 0;
  left: 0px;
  top: 0px;
  width: auto;
  height: auto;
  border-radius: 2px;
  mix-blend-mode: normal;
  background: rgba(255, 255, 255, 1);
  right: 0px;
  bottom: 0px;
}
.frame-JaL-2 {
  position: absolute;
  z-index: 2;
  left: 0px;
  top: 0px;
  width: auto;
  height: auto;
  mix-blend-mode: normal;
  overflow: hidden;
  right: 0px;
  bottom: 0px;
}
.frame-gts-1 {
  position: absolute;
  z-index: 1;
  left: calc(50% - 50px / 2 + 0px);
  top: 12px;
  width: 50px;
  height: 40px;
  mix-blend-mode: normal;
}
.text-cKl-1 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 0;
  justify-content: start;
  left: calc(50% - 50px / 2 + 0px);
  top: 0px;
  height: 16px;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.45);
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Regular";
  letter-spacing: 0px;
  white-space: nowrap;
}
.text-dId-2 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 1;
  justify-content: start;
  left: 2px;
  top: 24px;
  height: 16px;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.85);
  font-size: 18px;
  line-height: 16px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: nowrap;
}
</style>
